<template>
  <div class="slid-menu-item">    //这个div影响我们文字隐藏
    <!-- 是否只有一个子项 -->
    <template v-if="hasOneShowingChild(route.children,route)">
      <el-menu-item :index="resolvePath(onlyOneChild.path)" @click="setActivePath(resolvePath(onlyOneChild.path))">
        <i class="el-icon-menu"></i>
        <span slot="title">{{onlyOneChild.meta.title}}</span>
      </el-menu-item>
    </template>
    <!-- 有二级菜单 -->
    <template v-else>
      <el-submenu :index="route.path">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">{{route.meta.title}}</span>
        </template>
        <side-menu-item
                v-for="child in route.children"
                :key="child.path"
                :route="child"
                :basePath="resolvePath(child.path)"
        ></side-menu-item>
      </el-submenu>
    </template>
  </div>
</template>


  <script>
    export default {
      name: "App"

    };
  </script>



<style scoped>
  /*隐藏文字*/
  .el-menu--collapse  .el-submenu__title span{
    display: none;
  }
  /*隐藏 > */
  .el-menu--collapse  .el-submenu__title .el-submenu__icon-arrow{
    display: none;
  }

  .el-menu {
    height: 100%;
  }
  .el-menu:not(.el-menu--collapse) {
    width: 200px;
  }
</style>
